<template>
  <div class="app-container calendar-list-container">
    <!--分帐明细 filter 条件查询 -->
    <div class="filter-container">
      <div style="display:inline-block;font-size:15px;">支付流水号：</div>
      <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.outTradeNo"
        style="width: 300px;margin-right:15px;margin-top:7px"
        class="filter-item"
        placeholder="请输入支付流水号"
      />
      <div style="display:inline-block;font-size:15px;">昵称：</div>
      <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.name"
        style="width: 200px;margin-right:15px;margin-top:7px"
        class="filter-item"
        placeholder="请输入昵称"
      />
      <div style="display:inline-block;font-size:15px;">流水类型：</div>
      <el-select
        v-model="listQuery.type"
        placeholder="请选择流水类型"
        clearable
        class="filter-item"
        style="width: 150px;margin-right:15px;margin-top:7px"
      >
        <el-option label="代理商" value="1"></el-option>
        <el-option label="用户" value="2"></el-option>
      </el-select>
      <div style="display:inline-block;font-size:15px;">支付方式：</div>
      <el-select
        v-model="listQuery.payType"
        placeholder="请选择订单支付方式"
        clearable
        class="filter-item"
        style="width: 200px;margin-right:15px;margin-top:7px"
      >
        <el-option label="微信" value="1"></el-option>
        <!-- <el-option label="支付宝" value="2"></el-option> -->
        <!-- <el-option label="余额" value="3"></el-option> -->
        <el-option label="银行卡" value="4"></el-option>
      </el-select>
      <div style="display:inline-block;font-size:15px;">财务类型：</div>
      <el-select
        v-model="listQuery.financeType"
        placeholder="请选择财务类型"
        clearable
        class="filter-item"
        style="width: 200px;margin-right:15px;margin-top:7px"
      >
        <el-option label="代理收益" value="1"></el-option>
        <el-option label="代理支出" value="2"></el-option>
        <el-option label="代理提现" value="3"></el-option>
        <el-option label="驳回提现" value="4"></el-option>
        <el-option label="缴纳押金" value="5"></el-option>
        <el-option label="退押金" value="6"></el-option>
        <el-option label="订单消费" value="7"></el-option>
        <el-option label="订单退款" value="8"></el-option>
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="handleFilter"
      >查找</el-button>
      <el-button
        type="primary"
        class="filter-item"
        @click="handleDownload"
        icon="el-icon-download"
        :loading="downloadLoading"
      >导出</el-button>
    </div>
    <!-- table 表格 -->
    <el-table
      :data="list"
      v-loading="loading.list"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="序号" prop="index" align="center" width="80px"/>
      <el-table-column label="财务编号" prop="financeNo" align="center"/>
      <el-table-column label="昵称" prop="name" align="center"/>
      <el-table-column label="流水类型" prop="typeLabel" align="center"/>
      <el-table-column label="支付流水号" prop="outTradeNo" align="center" width="300px"/>
      <el-table-column label="交易金额" prop="fee" align="center"/>
      <el-table-column label="支付方式" prop="payTypeLabel" align="center"/>
      <el-table-column label="财务类型" prop="financeTypeLabel" align="center"/>
      <el-table-column label="创建时间" prop="cTime" align="center"/>
    </el-table>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.offset"
        :page-sizes="[10, 20, 30, 40, 100, 400]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { analysisDrawal } from "@/api/equipmentOrders";
import { parseTime, getdTime } from "@/utils";
export default {
  name: "equipmentOrders_list",
  data() {
    return {
      total: 0,
      listQuery: {
        offset: 1,
        limit: 10,
        outTradeNo: "",
        name: "",
        financeType: "",
        payType: "",
        type: ""
      },
      list: null,
      loading: {
        list: false,
        download: false
      },
      downloadLoading: false
    };
  },
  methods: {
    //导出
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [
          "财务编号",
          "昵称",
          "流水类型",
          "支付流水号",
          "交易金额",
          "支付方式",
          "财务类型",
          "创建时间"
        ];
        const filterVal = [
          "financeNo",
          "name",
          "typeLabel",
          "outTradeNo",
          "fee",
          "payTypeLabel",
          "financeTypeLabel",
          "cTime"
        ];
        const data = this.formatJson(filterVal, this.list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "财务流水"
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          return v[j];
        })
      );
    },
    //分帐明细列表
    async analysisDrawals() {
      this.loading.list = true;
      try {
        const { data } = await analysisDrawal({ ...this.listQuery });
        this.list = data.records.map((item, index) => {
          return {
            index: index + 1,
            ...item,
            typeLabel: item.type == 1 ? "代理商" : "用户",
            payTypeLabel:
              item.payType == 1
                ? "微信"
                : item.payType == 2
                ? "支付宝"
                : item.payType == 3
                ? "余额"
                : "银行卡",
            financeTypeLabel:
              item.type == 1
                ? item.financeType == 1
                  ? "代理收益"
                  : item.financeType == 2
                  ? "代理支出"
                  : item.financeType == 3
                  ? "代理提现"
                  : "驳回提现"
                : item.financeType == 1
                ? "缴纳押金"
                : item.financeType == 2
                ? "退押金"
                : item.financeType == 3
                ? "订单消费"
                : "订单退款"
          };
        });
        this.total = data.total;
      } catch (error) {}
      this.loading.list = false;
    },
    handleFilter() {
      this.listQuery.offset = 1;
      this.analysisDrawals();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.analysisDrawals();
    },
    handleCurrentChange(val) {
      this.listQuery.offset = val;
      this.analysisDrawals();
    },
    formatDate(date, offset) {
      if (date && typeof date == "object") {
        const d = date[offset];
        return new Date(d).getTime();
      }
      return "";
    }
  },
  created() {
    this.analysisDrawals();
  }
};
</script>
